<template>
  <video autoplay loop muted playsinline id="background-video">
    <source src="index/背景视频.mp4" type="video/mp4">
    <!-- 可以添加webm格式或其他备用源 -->
    <source src="background-video.webm" type="video/webm">
    <track kind="captions" label="English captions" srclang="en" src="captions_en.vtt" default>
    您的浏览器不支持视频标签。
  </video>

  <div class="common-layout">
    <el-container>
      <el-header>
        <h1 class="header-title">校企桥</h1>
      </el-header>
      <el-main class="card-container">
        <el-row :gutter="20" justify="center">
          <el-col :span="6">
            <el-card class="card-style"  @mouseover="hoverIn" @mouseleave="hoverOut" @click="navigateToStudentLogin">
              <img src="index/学生.jpg" class="card-image" alt="学生端">
              <div class="card-caption">学生端</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-style"  @mouseover="hoverIn" @mouseleave="hoverOut" @click="navigateToEmployerLogin">
              <img src="index/企业.png" class="card-image" alt="企业端">
              <div class="card-caption">企业端</div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer class="custom-footer">
        <div class="footer-content">
          <div class="about-us">
            <h3>关于我们</h3>
            <p>一个非常好的校园招聘平台</p>
          </div>
          <div class="contact-info">
            <h3>联系我们</h3>
            <ul class="contact-list">
              <li><i class="iconfont icon-email"></i> support@example.com</li>
              <li><i class="iconfont icon-phone"></i> +86-123-456-7890</li>
            </ul>
          </div>
          <div class="social-media">
            <h3>关注我们</h3>
            <div class="social-icons">
              <a href="#"><i class="iconfont icon-weibo"></i></a>
              <a href="#"><i class="iconfont icon-weixin"></i></a>
              <a href="#"><i class="iconfont icon-twitter"></i></a>
            </div>
          </div>
        </div>
        <div class="copyright">
          &copy; 2023 校企桥. All rights reserved.
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const navigateToStudentLogin = () => {
  router.push('/student-login');
};

const navigateToEmployerLogin = () => {
  router.push('/employer-login');
};
const hoverIn = (event) => {
  event.target.closest('.card-style').classList.add('hovered');
};

const hoverOut = (event) => {
  event.target.closest('.card-style').classList.remove('hovered');
};
</script>

<style scoped>
.el-main {
  flex: 1;
  overflow: hidden; /* 防止内容溢出显示滚动条 */
}
.el-header, .el-main, .el-footer {
  padding: 0 !important; /* 使用 !important 来确保覆盖默认样式 */
}
#background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: 100vh;
  z-index: -1;
  object-fit: cover;
}
@media (orientation: landscape) {
  #background-video {
    width: 100vw;
    height: auto;
  }
}
@media (orientation: portrait) {
  #background-video {
    width: auto;
    height: 100vh;
  }
}
.common-layout {
  height: 100vh;
}

.header-title {
  background-color: grey;
  color: #fff;
  padding: 16px;
  text-align: center;
  font-size: 24px;
  margin: 0;
  max-width: 100%;
}
.el-row {
  align-items: center; /* 确保卡片在行内垂直居中 */
}
.card-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}


.card-style {
  text-align: center;
  margin: 40px auto ; /* 取消外边距 */
  padding: 0; /* 取消内边距 */
  box-sizing: border-box; /* 确保padding和border被包含在宽高计算内 */
  /* 添加透明背景 */
  background-color: rgba(255, 255, 255, 0.7); /* 0.7 表示70%不透明度，可以根据需要调整 */
  border: none; /* 移除边框，或者调整边框颜色和宽度以适应透明效果 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影以增强卡片的层次感，可选 */
  backdrop-filter: blur(5px); /* 给卡片添加模糊效果，使底层视频模糊显示，此属性需注意兼容*/
  transition: all 0.3s ease;
}


.card-image {
  width: 100%;
  height: auto; /* 或具体高度，如400px */
  object-fit: cover; /* 或contain，根据需求选择 */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.card-style.hovered {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}


.card-caption {
  font-weight: bold;
  margin-top: 16px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
  padding: 24px;
}

.logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #eee;
}

.footer-heading {
  margin-bottom: 8px;
}

.link-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  display: inline-block;
  margin-right: 16px;
}

.qrcode {
  width: 50px;
  height: 50px;
  margin: 0 8px;
}

.copyright {
  color: #666;
  font-size: 12px;
}

.legal-links a {
  margin: 0 8px;
  color: #666;
  text-decoration: none;
}
.el-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 使容器至少占据视口高度的100% */
}

.el-main {
  flex: 1; /* 让 main 部分自适应剩余空间 */
}
.custom-footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  text-align: center;
}

.footer-content {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-content > div {
  flex: 1;
  min-width: 250px;
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 10px;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-list li {
  margin-bottom: 5px;
}

.contact-list i {
  margin-right: 5px;
}

.social-media .social-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-media a {
  color: #fff;
  transition: color 0.3s;
}

.social-media a:hover {
  color: #ddd;
}

.copyright {
  margin-top: auto;
  font-size: 14px;
}

/* 图标字体样式示例，确保已引入相关图标字体库 */
.iconfont {
  font-size: 18px;
}

</style>
